<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bluetooth device information</title>
    <style>
        #log {
            padding: 10px;
            margin: 10px;
            border: 1px solid #ccc;
            max-width: 80%;
            word-wrap: break-word;
        }
        #buttonContainer {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
        }
    </style>
    <script type="module" src="mgrLib.js"></script>
    <script src="bleLib.js"></script>
</head>

<body>
    <button id="scanButton">Scan for available Bluetooth devices</button>
    <button id="disconnectBle" style="display: none;">disconnect Ble</button>
  <dic id = "buttonContainer">
    <input type="text" id="passwordInput" style="display: none;" placeholder="输入密码（4位数字）" maxlength="4" pattern="\d{4}" value="0000">
    <button id="check_ID" style="display: none;">Verify Password</button>
  </dic>
  <dic id = "buttonContainer">
    <button id="read_step" style="display: none;">steps</button>
  </dic>
    <div id="log"></div>
    <ul id="deviceList"></ul>
    <script>
	//https://webbluetoothcg.github.io/web-bluetooth/#dom-navigator-bluetooth

        bleLib.isSupport();

        // 获取设备列表
        document.getElementById('scanButton').addEventListener('click', function () {
            bleLib.startScan();
           
        });

        document.getElementById('disconnectBle').addEventListener('click', function () {
            bleLib.toDisconenct();
        });

        document.getElementById('check_ID').addEventListener('click', function () {
            const password = passwordInput.value;
            if (!/^\d{4}$/.test(password)) {
                alert('请输入4位数字密码！');
                return;
            }
            window.mgrLib.login(password)
        });

        document.getElementById('read_step').addEventListener('click', function () {
            window.mgrLib.step()
        });

        document.addEventListener("gattserverdisconnected",onDisconnected);
        document.addEventListener("gattserverconnected",onConnected);

        function onConnected(evt)
        {
            document.getElementById('scanButton').style.display = "none";
            document.getElementById('disconnectBle').style.display = "inline-block";
            document.getElementById('passwordInput').style.display = "inline-block";
            document.getElementById('check_ID').style.display = "inline-block";
            document.getElementById('read_step').style.display = "inline-block";
            
        }

        function onDisconnected(evt)
        {
            document.getElementById('scanButton').style.display = "inline-block";
            document.getElementById('disconnectBle').style.display = "none";
            document.getElementById('passwordInput').style.display = "none";
            document.getElementById('check_ID').style.display = "none";
            document.getElementById('read_step').style.display = "none";
        }

        function log(message) {
            var logElement = document.getElementById('log');
            logElement.innerHTML += message + '<br>';
        }	
    </script>
</body>

</html>